<!--
 * @Description: 
 * @Author: HC
 * @Email: 2472911753@qq.com
-->
<template>
  <el-dialog
    class="newAdd-content"
    title="编辑试卷标题"
    :visible.sync="openedFrame"
    :width="'500px'"
    :before-close="closeFrame"
    :show-close="false"
    :close-on-click-modal="false"
    center
  >
    <div class="add-item">
      <el-input
        size="small"
        v-model="input"
        placeholder="请输入内容"
      ></el-input>
      <el-button size="small" type="primary" @click="handleAdd">新增</el-button>
    </div>
    <div class="item-style">
      <el-checkbox
        v-for="(item, i) in studentTitle"
        :key="i"
        v-model="item.checked"
        @change="changeCheckFunc"
        >{{ item.name }}</el-checkbox
      >
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFrame">取 消</el-button>
      <el-button type="primary" :disabled="isdisabledFn" @click="preCreateTitle"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import _ from "lodash";
export default {
  data() {
    return {
      openedFrame: false,
      isdisabledFn: false,
      studentTitle: [],
      input: "",
    };
  },
  computed: {
    ...mapState("page", ["pageData"]),
    ...mapState("page", ["pageLayout"]),
  },
  methods: {
    closeFrame() {
      this.openedFrame = false;
    },
    handleAdd() {
      if (!this.input) {
        return;
      }
      if (_.find(this.studentTitle, ["name", this.input])) {
        this.$message.info(`${this.input}已存在，请勿重复添加`);
        return;
      }
      this.studentTitle.push({
        name: this.input,
        checked: false,
      });
      this.input = "";
    },
    openedFrameFunc(obj) {
      this.studentTitle = obj;
      this.openedFrame = true;
    },
    changeCheckFunc() {
      const result = this.studentTitle.filter((item) => item.checked);
      if (result.length > 5) {
        this.isdisabledFn = true;
        this.$message({
          showClose: true,
          message: "最多选择五个学生显示信息",
          type: "error",
        });
      } else {
        this.isdisabledFn = false;
      }
    },
    preCreateTitle() {
      const { column, paperSpec } = this.pageLayout;
      let cur = this.pageData[0];
      let obj = {};
      if (column == 3 && paperSpec == "A3") {
        let long = this.studentTitle.filter((item) => item.checked).length;
        long = Math.ceil(long / 3);
        // obj = {
        //   checkHeight:long * 40
        // }
      }
      this.pageData.splice(0, 1, {
        ...cur,
        ...obj,
        content: {
          ...cur.content,
          titleInfo: this.studentTitle,
        },
      });
      this.closeFrame();
    },
  },
};
</script>

<style lang="less" scoped>
.item-style {
  padding: 10px 0;
}
.add-item {
  display: flex;
  .el-button {
    margin-left: 10px;
    width: 100px;
  }
}
</style>
